{% extends "_layouts/examples.html" %}
{% block title %}Forms / Password toggle{% endblock %}

{% block standalone_css %}patterns_forms{% endblock %}

{% block content %}
<div class="p-form-password-toggle">
  <label for="password">Password</label>
  <button class="p-button--base u-no-margin--bottom has-icon" aria-live="polite" aria-controls="password">
    <span class="p-form-password-toggle__label">
      Show
    </span>
    <i class="p-icon--show"></i>
  </button>
</div>
<input type="password" name="password" id="password" value="letmein">

<div class="p-form-validation is-error">
  <div class="p-form-password-toggle">
    <label for="password-error" class="is-required">Password</label>
    <button class="p-button--base u-no-margin--bottom has-icon" aria-live="polite" aria-controls="password-error">
      <span class="p-form-password-toggle__label">
        Show
      </span>
      <i class="p-icon--show"></i>
    </button>
  </div>
  <input type="password" name="password-error" id="password-error" class="p-form-validation__input" value="letmein" required aria-describedby="passwordRequiredErrorMessage">
  <p class="p-form-validation__message" id="passwordRequiredErrorMessage">Password is required</p>
</div>

<script>
  {% include 'docs/examples/patterns/forms/_script.js' %}
</script>
{% endblock %}
